<template>
    <cvp-page c="page primary medium">
        <!-- header -->
        <cvp-page-header c="page-header primary medium" title="应用管理">
            <cv-button c="btn warn small">创建应用</cv-button>
        </cvp-page-header><!-- header -->
        <!-- search -->
        <cvp-page-search @search="searchApp" @reset="reset" canReset c="page-search primary medium">
            <cv-form label="服务商名称" :labelWidth="5" c="form default medium distant">
                <cv-input v-model="searchCondition.servicerName" type="text" c="input default medium" placeholder="服务商名称"></cv-input>
            </cv-form>
            <cv-form label="应用名称" :labelWidth="5" c="form default medium distant">
                <cv-input v-model="searchCondition.name" type="text" c="input default medium" placeholder="应用名称"></cv-input>
            </cv-form>
        </cvp-page-search><!-- search -->
        <!-- data -->
        <cvp-page-data :data="data" :nullRow="{servicer:{}}" :page="page" c="page-data primary medium bottom">
            <template v-slot="scope">
                <cv-table-column label="#" :fixed="true" :width="40" :scope="scope">{{scope.index+1}}</cv-table-column>
                <cv-table-column label="服务商名称" :width="150" :scope="scope">{{(scope.row.servicer||{}).username}}</cv-table-column>
                <cv-table-column label="应用名称" :width="200" :scope="scope">{{scope.row.name}}</cv-table-column>
                <cv-table-column label="appId" :width="280" :scope="scope">{{scope.row.appId}}</cv-table-column>
                <cv-table-column label="访问模式" :width="80" :scope="scope">{{enums.accessMode[scope.row.accessMode]}}</cv-table-column>
                <cv-table-column label="应用状态" :width="80" :scope="scope">
                    <cv-tag c="tag warn mini">{{enums.state[scope.row.state]}}</cv-tag>
                </cv-table-column>
                <cv-table-column label="操作" :width="120" :scope="scope">
                    <template v-if="scope.row.state == 'CREATING'">
                        <cv-button @click="approveApp(scope.index, true)" c="link primary mini distant-x underline">通过</cv-button>
                        <cv-button @click="approveApp(scope.index, false)" c="link primary mini distant-x underline">拒绝</cv-button>
                    </template>
                </cv-table-column>
            </template>
        </cvp-page-data><!-- data -->
    </cvp-page>
</template>

<script>
    export default {
        name: "ExamplePage",
        data() {
            return {
                searchCondition: {
                    name: null,
                    servicerName: null
                },
                lastSearchCondition: null,
                data: [{
                    "id": 1,
                    "appId": "1000000000",
                    "appSecret": "appSecret",
                    "name": "测试APP",
                    "servicer": {
                        "id": 1,
                        "username": "test"
                    },
                    "accessMode": "OPEN", // 取值："OPEN"(开放制)、"APPROVED"(申请制)、"INVITATORY"(邀请制)
                    "state": "CREATING" // 取值："NORMAL"(正常)、"DISABLED"(禁用)
                }],
                page: {
                    number: 1,
                    size: 10,
                    total: 100
                },
                enums: {
                    accessMode: {
                        OPEN: "开放制",
                        APPROVED: "申请制",
                        INVITATORY: "邀请制",
                    },
                    state: {
                        NORMAL: "正常",
                        DISABLED: "禁用",
                        CREATING: "创建中"
                    }
                }
            };
        },
        methods: {
            async searchApp() {
                console.info("searchApp");
                console.info(this.searchCondition);
            },
            reset() {
                console.info("reset");
                this.searchCondition.name = null;
                this.searchCondition.servicerName = null;
            },
            async approveApp(index, approved) {
                console.info("approveApp: " + index + ", " + approved);
            }
        }
    }
</script>

<style scoped>
</style>